import React, { Suspense } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import HeaderClient from './HeaderClientPc';
import HeaderClientMobile from './HeaderClientMobile';

export default async function HeaderServer({ navigations, contact }) {
  return (
    <header className='bg-white h-14 md:h-16 sticky top-0 z-50 shadow-sm w-full'>
      <div className='mx-auto flex items-center justify-between h-full container'>
        <div className='logo h-full w-auto flex items-center py-3'>
          {contact.logo && (
            <Link className='flex items-center h-full' href='/'>
              <Image src={contact.logo} alt='logo' width={720} height={720} className='h-full w-auto object-contain' priority={true} />
            </Link>
          )}
        </div>
        <Suspense fallback={'<div>加载中...</div>'}>
          <HeaderClient navigations={navigations} className={'hidden lg:block'} />
          <HeaderClientMobile navigations={navigations} className={'block lg:hidden'} />
        </Suspense>
      </div>
    </header>
  )
}
